<template>
    <div>
        <h2>计数</h2>
        <!-- <p>求和:{{ sum1 }},放大十倍:{{ tenSum1 }}</p> -->
        <select name="" id="" v-model.number="num">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
        </select>
        <br>
        <button @click="addSum">增加</button>
        <button @click="reduceSum">减少</button>
        <p>求和:{{ CountStore.$state.sum }},放大十倍:{{ bigSum }}</p>
        <p>求和:{{ CountStore.sum }},放大十倍:{{ bigSum }}</p>
        <p>求和:{{ sum }},放大十倍:{{ bigSum }}</p>
    </div>
</template>

<script setup lang='ts' name="Count">
import { ref, reactive, computed } from 'vue'
import { storeToRefs } from 'pinia';
import { useCountStore } from '@/stores/count';

const CountStore = useCountStore()
// console.log(CountStore);

let { sum, bigSum } = storeToRefs(CountStore)

// let sum1 = ref<number>(1);
// // let sum2 = ref<string>("123");
let num = ref<number>(1);
// let tenSum1 = computed(() => {
//     return 10 * sum1.value
// })

function addSum() {
    // sum1.value += num.value
    CountStore.changeAdd(num.value)
}
function reduceSum() {
    // sum1.value -= num.value
    CountStore.changeReduce(num.value)
}

</script>


<style lang='scss' scoped></style>